<template>
	<view class="idDocument">
		<view class="txt">请拍摄二代身份证件证照片 <view>确保证件的完整清晰</view>
		</view>
		<view class="wrapp">
			<u-upload class="box" :action="action"  @on-Success="onSuccess" 
				 :header="token" max-count=1 width="675rpx" height="300rpx" 
				upload-text="请拍摄身份证正面"></u-upload>

		</view>
		<view class="wrapp" style="margin-top: 60rpx;">
			<u-upload class="box" :action="action1" @on-Success="onSuccessfan" 
			 :header="token" max-count=1 width="675rpx" height="300rpx"
				upload-text="请拍摄身份证反面"></u-upload>
		</view>
		<!-- 			
		<view class="image" style="margin-top: 300rpx;">
			<view class="wrap">
				
				<view class="pre-box" v-if="!showUploadLis">
					<view class="pre-item" v-for="(item, index) in listsfan" :key="index">
						<image class="pre-item-image" :src="item.url" mode="widthFix" style="width: 90vw;"></image>
					</view>
				</view>
				
				<u-upload :custom-btn="true" ref="uUploadfan" :show-upload-list="showUploadLis" :action="action"
					max-count=1>
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="../../static/iamges/yinhangka/jiahao.png" mode=""></image>
						<view> 请拍摄身份证反面</view>
					</view>
				</u-upload>
			</view>
		</view> -->
		<input type="text" v-model="userRealName" value="" placeholder="请输入您的名字" style="margin-top: 60rpx;" />
		<input type="text" v-model="userIdNumber" value="" placeholder="请输入你的身份证号码" />
		<button @click="renZhen">开始认证吧</button>
		<!--正面图片 认证失败弹出 -->
		<u-top-tips ref="uTips"></u-top-tips>
		<!--正面图片 认证成功弹出 -->
		<u-top-tips ref="uTipsz"></u-top-tips>
		<!--反面图片 认证失败弹出 -->
		<u-top-tips ref="uTipsfan"></u-top-tips>
		<!--反面图片 认证成功弹出 -->
		<u-top-tips ref="uTipsfanc"></u-top-tips>
		<!-- 认证成功弹出 -->
			<u-toast ref="uToast" />
		<u-top-tips ref="uTipssuccer"></u-top-tips>
		<!-- 认证失败弹出 -->
		<u-top-tips ref="uTipserr"></u-top-tips>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('user');
	export default {
		created() {
			//上传图片获取token
			const usertoken=uni.getStorageSync("token")
			this.token.token=usertoken
		},
		data() {
			return {
				action: 'http://hdannn.vaiwan.com/user/user-authentication/userIdCardPositivePicture', // 正面认证图片
				action1: 'http://hdannn.vaiwan.com/user/user-authentication/userIdCardBackPicture', // 反面图片认证
				percent: 0,
				token: {
					"token": ""
				},
				userRealName:"",
				userIdNumber:"",
			};
		},
		methods: {
			...mapActions(['userIdCardPositivePicture','userAuthentication']),
			async renZhen() {
			const data=	await this.userAuthentication({
					userRealName:"小易",
					userIdNumber:"123456199611245678"
				})
			console.log("asdasd",data)
			if(data.code==10001){
				console.log("用户认证成功")
				// this.$refs.uTipssuccer.show({
				// 	title: '用户认证成功',
				// 	type:"success"
				// });
				//用户认证成功返回之前的页面
				this.$refs.uToast.show({
									title: '用户认证成功',
									type: 'success',
									// back:true
								})
								uni.switchTab({
									url:"/pages/index/index"
								})
			}else{
				this.$refs.uTipserr.show({
					title: '用户认证失败',
					type:"success"
				});
			}
			},
			//正面图片上传成功
			onSuccess(data, index, lists) {
				console.log("scucc", data)
				if(data.code==10001){
					console.log("识别成功")
					this.$refs.uTipsz.show({
						title: '身份证正面识别失败',
						type:"error"
					});
				}else if(data.code==10002){
					this.$refs.uTips.show({
						title: '身份证正面识别失败',
						type:"error"
					});
				}
			},
			//反面面图片上传成功
			onSuccessfan(data, index, lists) {
				console.log("scucc", data, index, lists)
				if(data.code==10001){
					console.log("识别成功")
					this.$refs.uTipsfanc.show({
						title: '身份证反面识别成功',
						type:"error"
					});
				}else if(data.code==10002){
					this.$refs.uTipsfan.show({
						title: '身份证反面识别失败',
						type:"error"
					});
				}
			},
		}
	};
</script>


<style lang="scss" scoped>
	.idDocument {
		background-color: #fafafa;

		.txt {
			font-size: 40rpx;
			text-align: center;
			padding: 20rpx;

			view {
				font-size: 24rpx;
				color: #818080;
				padding: 20rpx 0;
			}
		}

		.image {
			// border: 1px solid red;
			margin: 40rpx;
			border-radius: 30rpx;
			height: 300rpx;

			>view {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				padding-bottom: 40rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				padding-bottom: 20rpx;
			}

		}

		button {
			margin: 20rpx;
		}

		input {
			background-color: #ffffff;
			padding: 20rpx;
			margin: 20rpx;
		}
	}

	.wrap {
		padding: 24rpx;
		width: 100%;
		height: 100%;
	}

	.slot-btn {

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
		border: 1px solid red;
		height: 300rpx;
		padding: 0;
		width: 90vw;
		border-radius: 30rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		//border: 1px solid black;
		height: 300rpx;
		padding: 0;
		width: 90vw;
	}

	.pre-item {
		//flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		border: 1px solid black;
		height: 300rpx;
		padding: 0;
		width: 90vw;
	}

	.pre-item-image {
		width: 600rpx;
	}

	.wrapp {
		margin: 0;
		padding: 0;
		//border: 1px solid red;
		//overflow: hidden;
		//border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 675rpx;
		height: 300rpx;
		margin: 30rpx;

		.box {
			width: 100%;
			height: 100%;
			//border: 1px solid black;

		}
	}
</style>
